<template>
  <div>
    <div class="button-list">
      <el-button type="primary" size="small" v-on:click="getRecord()">刷新</el-button>
    </div>
    <div class="table-content">
      <el-table :data="monitorData" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="name" label="任务名称" width="200"></el-table-column>
        <el-table-column prop="type_spider" label="爬虫类型" width="120"></el-table-column>
        <el-table-column prop="type_template" label="模版类型"></el-table-column>
        <el-table-column prop="type_business" label="业务类型"></el-table-column>
        <el-table-column prop="jid" label="任务id"></el-table-column>
        <el-table-column prop="handleTime" label="处理时间"></el-table-column>
        <el-table-column label="文件下载">
          <template slot-scope="scope"><a :href=scope.row.downloadURL>文件下载</a></template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
        </el-pagination>
      </el-col>
    </div>
  </div>
</template>

<script>
  import { getTaskList, timeFormat } from '../apis/api'
  export default {
    data () {
      return {
        monitorData: [],
        multipleSelection: [],
        sels: [],
        listLoading: false,
        endpointSP: this.$store.state.endpointSP,
        endpointDB: this.$store.state.endpointDB,
        total: 0,
        page: 1
      }
    },
    methods: {
      getRecord () {
        const _this = this
        _this.listLoading = true
        getTaskList(_this.page).then(res => {
          _this.total = res.data.count
          for (let i in res.data.results) {
            res.data.results[i].handleTime = timeFormat(res.data.results[i].handleTime)
          }
          _this.monitorData = res.data.results
          _this.listLoading = false
        }, res => {
          _this.$message({
            message: '出错了，请联系管理员',
            type: 'error'
          })
        })
      },
      handleCurrentChange (val) {
        this.page = val
        this.getRecord()
      },
      selsChange: function (sels) {
        this.sels = sels
      }
    },
    mounted () {
      this.getRecord()
    }
  }
</script>

<style scoped>
  .button-list {
    margin-bottom: 10px;
  }
</style>
